<template>
  <!-- 图表容器：设置宽度和高度 -->
  <div ref="chartRef" style="width:100%; height: 400px;background-color: #fff;"></div>
  <div ref="chartRef1" style="width:100%; height: 400px;background-color: #fff;"></div>
</template>

<style></style>

<script setup lang="ts">
// 引入 获取首页数据函数
import { DashGetList } from '@/api/Dashboard'
// 引入 Vue 的 Composition API
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'

// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
const chartRef1 = ref(null)
// 存储 ECharts 实例
let chartInstance: any = null
let chartInstance1 = null


let up = reactive([])
let down = reactive([])
let down1 = reactive([])




// 初始化图表的方法
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value)

    // 配置项
    const option = {
      title: {
        text: "用户活跃度",
        // subtext: "Sub Title",
        left: "center",
        // top: "center",
        textStyle: {
          fontSize: 30
        },
        subtextStyle: {
          fontSize: 20
        }
      },

      xAxis: {
        type: 'category',
        data: up,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: down1,
          type: 'line',
        }
      ]
    };
    // 使用配置项渲染图表
    chartInstance.setOption(option)
  }
}
const initChart1 = () => {
  if (chartRef1.value) {
    // 初始化 echarts 实例
    chartInstance1 = echarts.init(chartRef1.value)

    // 配置项
    const option = {
      title: {
        text: "题目月数量",
        // subtext: "Sub Title",
        left: "center",
        // top: "center",
        textStyle: {
          fontSize: 30
        },
        subtextStyle: {
          fontSize: 20
        }
      },
      xAxis: {
        type: 'category',
        data: up,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: down,
          type: 'line',
        }
      ]
    };
    // 使用配置项渲染图表
    chartInstance1.setOption(option)
  }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize()
}

// 组件挂载后执行初始化
onMounted(() => {
  DashGetList().then(res => {
    console.log(res);
    console.log(res.response?.mothDayText);
    up = res.response?.mothDayText
    down = res.response?.mothDayDoExamQuestionValue
    down1 = res.response?.mothDayUserActionValue
    console.log(up, down, '首页表格数据');
    // option.xAxis = res.response?.mothDayText
    initChart()
    initChart1()
  })
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener('resize', resizeChart)
})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance?.dispose() // 销毁 echarts 实例
})
</script>
